<template>
	<view class="content">
		<uni-row class="row">
			<uni-col class="left" :span="5">
				<view :class="{item:true,active:currentMenuId===menu.id}" v-for="menu in menuData"
					@click="doShow(menu.id)">{{menu.name}}</view>
			</uni-col>
			<uni-col :span="19">
					<view class="item-good" v-for="item in tableData">
						<image :src="item.img"></image>
						<view class="item-un">
							<text>{{ item.name }}</text>
							<view>
								${{ item.price }}
							</view>
							<view class="pip">
								<image src="../../static/add.png" @click="doShowDetail(item.id)"></image>
							</view>
						</view>
					</view>
			</uni-col>
		</uni-row>
	</view>
</template>

<script setup>
	
	import  {API_HOST}  from  '/config/const.js'
	
	import {
		ref,
		onMounted
	} from 'vue';
	const menuData = ref([]);

	const currentMenuId = ref('')

	const tableData = ref([])

	const query = () => {
		uni.request({
			url: `${API_HOST}/catalogs`, //仅为示例，并非真实接口地址。
			success: (res) => {
				menuData.value = res.data;
				currentMenuId.value = menuData.value[0].id;
				queryGoodsByCatalogId(currentMenuId.value);
			}
		});
	}

	onMounted(() => {
		query();

	})


	const doShow = (id) => {
		currentMenuId.value = id;
		queryGoodsByCatalogId(id);
	}

	//根据类别的编号查询商品
	const queryGoodsByCatalogId = (id) => {
		uni.request({
			url: `${API_HOST}/goods?catalogId=${id}`, //仅为示例，并非真实接口地址。
			success: (res) => {
				tableData.value = res.data
			},
		});
	}
	
	const doShowDetail =(id)=>{
		uni.navigateTo({
			url:`/pages/detail/detail?id=${id}`
		})
	}
	
</script>

<style scoped>
	.content {
		height: 100vh;
	}

	.left {
		height: 80vh;
		position: fixed;
	}

	.item {
		height: 100rpx;
		text-align: center;
		line-height: 120rpx;

		background-color: aliceblue;
	}

	.active {
		border-left: 10rpx solid green;
		font-weight: bold;
		color: forestgreen;
		background-color: white;
	}

	.item-good {
		width: 290rpx;
		height: 200rpx;
		background-color: white;
		margin: 80rpx;
		display: flex;

	}

	.item-good image {
		width: 100%;
		height: 250rpx;
		margin: 0rpx auto;
	}

	.item-un {
		width:100px;
		word-break:keep-all;
		white-space:nowrap;
		margin-top: 100rpx;
		margin: 10rpx;
	}
	.pip{
		width: 150rpx;
		height: 20rpx;
		right: 20rpx;
	}
	.pip image{
		width: 80rpx;
		height: 60rpx;
	}
</style>